<template>
  <div class="flex items-center justify-end search-btn">
    <el-button type="primary" :size="size" @click="search">
      <template #icon>
        <Search reset=""/>
      </template>
      查询
    </el-button>
    <el-button :size="size" @click="reset">
      <template #icon>
        <Refresh/>
      </template>
      重置
    </el-button>
    <el-button v-if="showCollapse" type="primary" link @click="handleCollapsed">
      {{ collapsed ? "展开" : "合并" }}
      <el-icon class="el-icon--right">
        <component :is="collapsed ? ArrowDown : ArrowUp"/>
      </el-icon>
    </el-button>
  </div>
</template>

<script setup name="SearchButton">

import {Search, Refresh, ArrowDown, ArrowUp} from '@element-plus/icons-vue'
const size = ref('default')
const emits = defineEmits(["collapse"])
// 是否默认折叠搜索项
const collapsed = ref(true)

const props = defineProps({
  search: {
    type: Function
  },
  reset: {
    type: Function
  },
  showCollapse: {
    type: Boolean,
    default: false
  }
});

function handleCollapsed () {
  collapsed.value = !collapsed.value
  emits("collapse", collapsed.value);
}
</script>
<style scoped lang="scss">
</style>